window.onload=function(){
    var obj={

    }
    function initEvent(){
        var titleList =document.getElementsByClassName('title');
    var contentList=document.getElementsByClassName('content');

for(let i=0; i< titleList.length; i++){
    titleList[i].onclick=function(){//为第i个标题绑定点击事件
           //当地i个标题点击后，要做什么呢?
           //只显示地i个内容，为第i个内容加标签(为地i个内容添加active类别，删除其他active类别)
           contentList[i].classList.add('active');
           titleList[i].classList.add('active');
           //删除其他的active类别
           for(let j=0;j<contentList.length;j++){
               if(j !=i){//不是当前的内容
               contentList[j].classList.remove('active');
               titleList[j].classList.remove('active');

           }
    }

}

}
        
    }
    initEvent();

    //点击不同的标题显示不同的内容
    
//获取按钮对象，绑定添加点击事件，实现添加元素节点功能
var btnAdd=document.getElementById('add');
btnAdd.onclick=function(){
    //创建一个节点
    
    let cli=document.createElement('li');
    //添加节点到ul中
    let text=document.createTextNode('标题四');
    li.appendChild(text);
    //添加属性节点
    let clazz =document.createAttribute('class');
    clazz.value='title';
    li.setAttributeNode(clazz);

    let ul =document.getElementsByClassName('titles')[0];
    ul.appendChild(li);


    let cli=document.createElement('li');
    let ctext=document.createTextNode('内容四');
    cli.appendChild(ctext);
    let cclazz=document.createAttribute('class');
    clazz.value='content';
    cli.setAttributeNode(cclazz);
    let cul=document.getElementsByClassName('contents')[0];
    cul.appendChild(cli);


   
     
     initEvent();
}
}